CSSの基本(17)−回り込みの指定
今回は、CSSを使って画像などの周りに文字を回り込ませる方法を紹介します。HTMLでもalign属性により文字を回り込ませることは可能ですが、CSSを使うと、もっと詳細に回り込みを指定できるようになります。試してみてください。

→ 回り込みを指定する
 
CSSで回り込みを指定する場合は、floatプロパティを利用します。その値に「left」を指定すると、要素を左に配置し、その右側に文字を回り込ませることが可能となります。これとは逆に、左側に文字を回りこませる場合は、値に「right」を指定します。
<IMG src="photo1.jpg" style="float:left">
<H3>■冬の北海道</H3>
北海道といえば「夏に旅行する場所」と思うかもしれませんが、冬の北海道もなかなか捨てがたい旅情があります。広大な大地に降り積もった一面の雪景色、そんな光景を楽しめるのは北海道だけす。そのぶん、寒さも半端じゃないのですが…。今年の冬は、北海道に行ってみませんか?<BR>
サンプルページ


→ 回り込みの余白を調整する
 
floatプロパティだけを指定した場合、文字との間に余白がないため、あまり見た目に美しいデザインになりません。このような場合は、marginプロパティで外部余白を指定すると、自由に余白を調整できます。このとき、margin-rightやmargin-leftを使って、左右の余白を個別に指定すると、キレイにレイアウトを整えられます。
<IMG src="photo1.jpg" style="float:left; margin-right:10px">
<H3>■冬の北海道</H3>
北海道といえば「夏に旅行する場所」と思うかもしれませんが、冬の北海道もなかなか捨てがたい旅情があります。広大な大地に降り積もった一面の雪景色、そんな光景を楽しめるのは北海道だけす。そのぶん、寒さも半端じゃないのですが…。今年の冬は、北海道に行ってみませんか?<BR>
サンプルページ


→ 回り込みを解除する
 
floatプロパティで回り込みを指定すると、以降の文字が全て回りこんで配置されます。途中で回り込みを解除したい場合は、その要素にclearプロパティを指定します。clearプロパティの値には、回り込みを解除する方向(floatプロパティに指定した値)を記述してください。なお、以下の例ではBRタグにclearプロパティを指定していますが、これをH3タグに指定しても構いません。回り込みを解除したあとの文字との間隔が狭い場合は、margin-bottomプロパティで下側の外部余白を調整すると、思い通りにレイアウトできます。
<IMG src="photo1.jpg" style="float:left; margin-right:10px; margin-bottom:50px">
<H3>■冬の北海道</H3>
北海道といえば「夏に旅行する場所」と思うかもしれませんが、冬の北海道もなかなか捨てがたい旅情があります。広大な大地に降り積もった一面の雪景色、そんな光景を楽しめるのは北海道だけす。そのぶん、寒さも半端じゃないのですが…。今年の冬は、北海道に行ってみませんか?<BR>
<BR style="clear:left">
<H3>■電車で行く北海道の旅</H3>
 :
サンプルページ


e[NECir Yahoo yV LINEf[^[z500~`I
z[y[W NWbgJ[h COiq@COsI COze